/*
** BUTTONS
** From http://particletree.com/features/rediscovering-the-button-element/
*/
.button-focus (@bg; @bord; @text) {
    background-color: @bg;
    border:1px solid @bord;
    color: @text;
}
.button-active (@active-color) {
    background-color:@active-color;
    border:1px solid @active-color;
    color:@text-white;
}

.styled-button {
    background-image: none; /* Firefox <35 for Android, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button */
    background-color:@very-light-bg;
    border:1px solid @dark-button-border;
    border-top:1px solid @light-button-border;
    border-left:1px solid @light-button-border;

    font-family: @sans-serif-button;
    font-size: @medium-text;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:@button-text;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */

    &:hover, &:focus {
        .button-focus(@button-hover-background; @button-hover-border; @button-hover-text);
    }

    &:active {
        .button-active(@button-active);
    }

    &.positive {
        color: @positive-text;
    }

    &.positive:hover, &.positive:focus {
        .button-focus(@positive-hover-background; @positive-hover-border; @positive-hover-text);
    }

    &.positive:active {
        .button-active(@positive-active);
    }

    &.negative {
        color: @negative-text;
    }

    &.negative:hover, &.negative:focus {
        .button-focus(@negative-hover-background; @negative-hover-border; @negative-hover-text);
    }

    &.negative:active {
        .button-active(@negative-active);
    }

    &[disabled] {
        &, &:hover, &:active, &:focus {
            color: @dark-text;
            border: 1px solid @light-button-border;
            background-color: @very-light-bg;
            cursor: default;
        }
    }
}

div.buttons, span.buttons { display: inline-block; }

/* Standard */
.buttons a { text-align: center; }

.buttons a,
.buttons button {
    float: left;
    margin: 0 7px 0 0;
    .styled-button();
}
.buttons button {
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons input[type],
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html input[type],
*:first-child+html button[type] {
    padding:4px 10px 3px 7px; /* IE7 */
}

.buttons a img,
.buttons button img {
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:15px;
    height:15px;
}

.buttons .buttons-right {
    float: right;
    text-align: right;
}

/* Special */

/* Buttons that should be inline (e.g. with an input or select) */
.buttons.inline button {
    float: none;
    padding: 2px 6px;
}

/* Buttons styled to look like links (class name from Bootstrap) */
.btn-link {
    color: @link-default;
    background: none;
    border: 0;

    &:hover {
        text-decoration: underline;
        cursor: pointer;
    }
}

/*
** RATINGS
*/

.star-rating {
    position:relative;
    display:block;
    width: 50px;
    height: 10px;
    line-height: 10px;
    overflow:hidden;
    list-style:none;
    margin:0;
    padding:0;

    li {
        display: inline;
    }

    a,
    .current-user-rating,
    .current-rating {
        position:absolute;
        top:0;
        left:0;
        text-indent:-1000em;
        overflow:hidden;
        border: none;
    }

    &,
    a:hover,
    a:active,
    a:focus,
    .current-user-rating,
    .current-rating {
        background-image: data-uri('../images/icons/rating_star_small.gif');
        background-position: 0px 0px;   // grey star
        outline: none;
    }

    .current-rating {
        background-position: 0px -30px; // blue star
    }
    .current-user-rating {
        background-position: 0px -10px; // yellow star
    }
    a:active,
    a:focus,
    a:hover {
        background-position: 0px -20px; // green star
    }

    a.stars-1 {
        width:20%;
        z-index:6;
    }
    a.stars-2 {
        width:40%;
        z-index:5;
    }
    a.stars-3 {
        width:60%;
        z-index:4;
    }
    a.stars-4 {
        width:80%;
        z-index:3;
    }
    a.stars-5 {
        width:100%;
        z-index:2;
    }
}

/* for an inline rater */
.inline-rating {
    display:inline-block;
}

/*
** Tag cloud
*/

ul.tag-cloud {
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 2em;
    text-align: justify;
}

ul.tag-cloud li {
    list-style-image: none;
    list-style-type: none;
    display: inline;
    padding: 2px;
}

ul.tag-cloud li.tag1 { font-size: 0.75em; }
ul.tag-cloud li.tag2 { font-size: 1em; }
ul.tag-cloud li.tag3 { font-size: 1.3em; }
ul.tag-cloud li.tag4 { font-size: 1.7em; }
ul.tag-cloud li.tag5 { font-size: 1.7em; font-weight: bold; }
ul.tag-cloud li.tag6 { font-size: 2em; font-weight: bold;}
ul.tag-cloud li.tag7 { font-size: 2.5em; font-weight: bold; }

/*
** CAA image viewer
*/

.artwork-dialog { padding: 0 !important; text-align: center; }
.artwork-dialog img { cursor: pointer; }
.artwork-dialog-controls { width: 100%; padding: 0.5em; padding-bottom: 0; }
.artwork-dialog-controls .artwork-pager { float: left; margin: 0.5em; }
.artwork-dialog-controls .buttons { float: right; }

/*
** Misc
*/

div.mtcaptcha {
    display: inline-block;
    iframe { border: none; }
}

.loading-message {
    padding-left: 20px;
    background-color: transparent;
    background-image: data-uri("../images/icons/loading.gif") !important;
    background-position: left top;
    background-repeat: no-repeat !important;
}

.loading-tab {
    .loading-message();
    padding-left: 12px !important;
    background-position: 4px center !important;
}

.content-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff data-uri("../images/icons/loading.gif") center center no-repeat;
}

.iframe-dialog {
    padding: 0 !important;
    width: 800px;
}

.iframe-dialog iframe {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Autocomplete2 */

div.autocomplete2 {
    display: inline-block;
    position: relative;

    div[role="combobox"] {
        display: flex;
        flex-direction: row;

        &[aria-expanded="true"] + ul[role="listbox"] { visibility: visible; }

        input {
            flex-grow: 1;
            &.required { background-color: @negative-light-bg; }
        }

        button.search {
            background-color: transparent;
            background-image: data-uri('../images/icons/search.svg');
            background-position-y: center;
            background-repeat: no-repeat;
            background-size: contain;
            border: none;
            min-height: 20px;
            min-width: 20px;

            &.loading {
                background-image: data-uri('../images/icons/loading.gif');
            }
        }
    }

    div[role="status"] {
        height: 1px;
        left: -1px;
        overflow: hidden;
        position: absolute;
        top: -1px;
        width: 1px;
    }

    ul {
        background: @text-white;
        border: 1px #AAA solid;
        border-bottom-width: 2px;
        border-right-width: 2px;
        list-style: none;
        margin: 0;
        max-width: 350px;
        max-height: 400px;
        overflow-y: auto;
        padding: 0;
        position: absolute;
        visibility: hidden;
        width: 150%;
        z-index: 100;

        li {
            background: @text-white;
            border-width: 1px;
            border-color: @text-white;
            border-style: solid;
            cursor: pointer;
            margin: 1px;
            padding: 4px;
            &.action-item {
                font-style: italic;
                text-align: center;
            }
            &.disabled {
                color: #666;
                cursor: default;
            }
            &.highlighted {
                background: linear-gradient(180deg, @very-light-bg 0%, darken(@very-light-bg, 10%) 50%, @very-light-bg);
                border-color: @dark-border;
                border-radius: 4px;
            }
            &.selected {
                font-weight: bold;
            }
            &.separator {
                border-top-color: @medium-grey;
                border-top-width: 2px;
                margin-top: 4px;
            }
            &.header-item {
                color: @text-black;
                font-weight: bold;
                text-align: center;
            }
            &.level1 { padding-left: 12px; }
            &.level2 { padding-left: 20px; }
            &.level3 { padding-left: 28px; }
            &.level4 { padding-left: 36px; }
        }
    }
}

#ac-source-single-artist-label, label.autocomplete2-label {
    display: none;
    &.visible { display: inline; }
}

.breadcrumb {
    ol {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            height: 1em;
            & + li {
                padding-left: 0.5em;
                &::before {
                    border-left: 1px solid @text-black;
                    content: '';
                    display: inline-block;
                    height: 1em;
                    padding-left: 0.5em;
                    transform: rotate(15deg);
                    transform-origin: -0.5em;
                }
            }
        }
    }
}
